<template>
  <div class="video-generation-form">
    <el-card class="form-card">
      <template #header>
        <div class="card-header">
          <h3>生成足球图标视频</h3>
        </div>
      </template>
      
      <el-form :model="formData" label-width="120px" :rules="rules" ref="formRef">
        <el-form-item label="字幕文件路径" prop="subtitlePath">
          <el-input v-model="formData.subtitlePath" placeholder="请输入字幕文件完整路径">
            <template #prepend>
              <el-icon><Document /></el-icon>
            </template>
          </el-input>
          <div class="form-tip">选择包含足球比赛信息的字幕文件</div>
        </el-form-item>
        
        <el-form-item label="输出视频文件夹" prop="videoFolder">
          <el-input v-model="formData.videoFolder" placeholder="请输入视频输出文件夹路径">
            <template #prepend>
              <el-icon><Folder /></el-icon>
            </template>
          </el-input>
          <div class="form-tip">指定生成的视频保存位置</div>
        </el-form-item>
        
        <el-form-item>
          <el-button 
            type="primary" 
            @click="generateVideos" 
            :loading="processing"
            :disabled="!formData.subtitlePath || !formData.videoFolder || processing"
          >
            开始生成视频
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <!-- 处理结果显示 -->
    <div v-if="processResult" class="result-section">
      <el-alert
        :title="processResult.success ? '处理成功' : '处理失败'"
        :type="processResult.success ? 'success' : 'error'"
        :description="processResult.message"
        show-icon
      />
      
      <div v-if="processResult.success && processResult.data" class="result-data">
        <h4>处理结果统计</h4>
        <ul class="stats-list">
          <li>总计处理: {{ processResult.data.total || 0 }} 个视频</li>
          <li>成功生成: {{ processResult.data.success_count || 0 }} 个视频</li>
          <li>处理失败: {{ processResult.data.failed_count || 0 }} 个视频</li>
        </ul>
        
        <el-button v-if="processResult.data?.output_folder" type="success" size="small" @click="openOutputFolder">
          打开输出文件夹
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { Document, Folder } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import footballService from '../services/footballService';

// 表单引用
const formRef = ref(null);

// 表单数据
const formData = reactive({
  subtitlePath: '',
  videoFolder: ''
});

// 表单规则
const rules = {
  subtitlePath: [
    { required: true, message: '请输入字幕文件路径', trigger: 'blur' }
  ],
  videoFolder: [
    { required: true, message: '请输入视频输出文件夹路径', trigger: 'blur' }
  ]
};

// 状态
const processing = ref(false);
const processResult = ref(null);

// 生成视频
async function generateVideos() {
  if (!formRef.value) return;
  
  await formRef.value.validate(async (valid) => {
    if (!valid) {
      ElMessage.warning('请填写所有必填字段');
      return;
    }
    
    try {
      processing.value = true;
      processResult.value = null;
      
      const result = await footballService.generateIconVideos(
        formData.subtitlePath,
        formData.videoFolder
      );
      
      processResult.value = result;
      
      if (result.success) {
        ElMessage.success('视频生成任务已完成');
      } else {
        ElMessage.error(result.message || '生成视频失败');
      }
    } catch (error) {
      console.error('生成视频失败:', error);
      processResult.value = {
        success: false,
        message: error.message || '生成视频时发生错误'
      };
      ElMessage.error('生成视频时发生错误: ' + (error.message || '未知错误'));
    } finally {
      processing.value = false;
    }
  });
}

// 打开输出文件夹
function openOutputFolder() {
  // 创建一个临时链接元素并触发点击
  if (processResult.value?.data?.output_folder) {
    const path = processResult.value.data.output_folder;
    // 这里仅在浏览器端模拟打开文件夹行为，实际可能需要后端支持
    ElMessage.info(`请手动导航至文件夹: ${path}`);
    
    // 复制路径到剪贴板
    try {
      navigator.clipboard.writeText(path)
        .then(() => ElMessage.success('文件夹路径已复制到剪贴板'))
        .catch(() => ElMessage.warning('无法复制到剪贴板'));
    } catch (e) {
      // 降级处理
      const textarea = document.createElement('textarea');
      textarea.value = path;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
      ElMessage.success('文件夹路径已复制到剪贴板');
    }
  }
}
</script>

<style scoped>
.video-generation-form {
  width: 100%;
}

.form-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
  line-height: 1.4;
}

.result-section {
  margin-top: 20px;
}

.result-data {
  margin-top: 15px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.stats-list {
  list-style-type: none;
  padding-left: 0;
}

.stats-list li {
  margin: 8px 0;
}
</style>